<template>
  <div class="edu-page-warp">
    <el-card shadow="never">
      <section class="title-container">
        <div class="page-title">
          {{ typeTitle }}
        </div>

      </section>
      <section class="title">
        {{ data.questionnaireTitle }}
      </section>
      <div style="text-align: center;color: #666;margin-bottom: 20px;">
        {{data.introduction}}
      </div>
      <!-- 预览 -->
      <section>
        <div v-if="data.length < 1" class="no-data">
          暂无数据
        </div>
        <div v-else>
          <div v-for="(item, index) in data.questionList" :key="index" class="question-item-container">
            <div class="question-item-title-container">
              <div>
                <div class="question-title">
                  <div>{{index+1}}. {{item.title}}&nbsp;</div>
                  <div>
                    <template v-if="item.titleType === 1">
                      {{`【单选题】`}}
                    </template>
                    <template v-if="item.titleType === 2">
                      {{`【多选题】`}}
                    </template>
                    <template v-if="item.titleType === 3">
                      {{`【问答题】`}}
                    </template>
                  </div>
                  <!-- <div v-if="item.weight > 0 && !ifProcess">
                    {{`（${item.weight}%）`}}
                  </div> -->
                </div>
              </div>
            </div>
            <!-- titleType: {1.单选 2.多选 3.问答} -->
            <!-- 单选题 -->
            <div v-if="item.titleType === 1" class="question-row">
              <QPRadioGroup
                @radioChange="dataChange"
                :rowData="item"
                class="question-item-title-container">
                <el-radio
                  v-for="(item1, index1) in JSON.parse(item.options)"
                  :label="item1.option"
                  :value="item1.option"
                  :key="index1"
                  style="margin-right: 40px;">
                  {{`${item1.option}.${item1.des}`}}
                </el-radio>
              </QPRadioGroup>
            </div>
            <!-- 多选题 -->
            <div v-if="item.titleType === 2" class="question-row">
              <QPCheckboxGroup
                @checkChange="dataChange"
                :rowData="item">
                <el-checkbox
                  v-for="(item1, index1) in JSON.parse(item.options)"
                  :key="index1"
                  :label="`${item1.option}`">
                  {{`${item1.option}.${item1.des}`}}
                </el-checkbox>
              </QPCheckboxGroup>
            </div>
            <!-- 问答题 -->
            <div v-if="item.titleType === 3" class="question-row">
              <QPTextareaGroup
                @textChange="dataChange"
                :rowData="item">
              </QPTextareaGroup>
            </div>
          </div>
        </div>
        <el-row :gutter="20" style="text-align: right;margin-top: 20px;">
          <el-button v-if="!ifForceComeIn" @click="cancel">{{$t('取消')}}</el-button>
          <el-button v-if="!ifForceComeIn" @click="save">{{$t('保存')}}</el-button>
          <el-button type="primary" @click="submit">{{$t('提交')}}</el-button>
        </el-row>
      </section>
    </el-card>
  </div>
</template>
<script>
import QPCheckboxGroup from './QPCheckboxGroup'
import QPRadioGroup from './QPRadioGroup'
import QPTextareaGroup from './QPTextareaGroup'
import questionnaireApi from 'common/src/api/teachingEvaluation/questionnaire'
export default {
  name: 'QuestionsWrite',
  components: {
    QPCheckboxGroup,
    QPRadioGroup,
    QPTextareaGroup
  },
  props: {
    typeTitle: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => {
        return {}
      }
    },
    ifProcess: {
      type: Boolean,
      default: false
    },
    ifStudentComeIn: {
      type: Boolean,
      default: false
    },
    ifForceComeIn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      resultList: []
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      // console.log('this.data.questionList', this.data.questionList)
      this.resultList = this.data.questionList.map(item => {
        if (item.titleType === 1) {
          return {
            contentId: item.id,
            titleType: item.titleType,
            options: item.chooseOptions,
            optionsScore: item.optionsScore
          }
        } else if (item.titleType === 2) {
          return {
            contentId: item.id,
            titleType: item.titleType,
            options: item.chooseOptions
          }
        } else {
          return {
            contentId: item.id,
            titleType: item.titleType,
            answer: item.answer
          }
        }
      })
    })
  },
  methods: {
    // 数据变动
    dataChange(resultMap_) {
      if (this.resultList.length > 0) {
        const ids = this.resultList.map(item => {
          return item.contentId
        })
        if (ids.indexOf(resultMap_.contentId) >= 0) {
          this.resultList.forEach((item, index) => {
            this.resultList.splice(ids.indexOf(resultMap_.contentId), 1, resultMap_)
          })
        } else {
          this.resultList.push(resultMap_)
        }
      } else {
        this.resultList.push(resultMap_)
      }
      console.log('dataChange', this.resultList)
    },
    cancel() {
      this.$emit('onlyGoBack')
    },
    // 保存
    save() {
      this.$confirm(this.$t('确定要保存吗'), this.$t("message.prompt"), {
        confirmButtonText: this.$t("message.confirm"),
        cancelButtonText: this.$t("message.cancel"),
        type: "warning"
      }).then(() => {
        if (this.ifStudentComeIn) { // 学生保存
          let param = {
            objectConfigId: this.data.objectConfigId,
            studentId: this.data.studentId,
            courseCode: this.data.courseCode,
            managementId: this.data.managementId,
            submitStatus: 0,
            evaluateType: this.data.evaluateType,
            contentSaveDTOList: this.resultList
          }
          questionnaireApi.saveQuestionnaireStu(param).then(res => {
            if (res.code == 200) {
              this.$message.success('保存成功')
              this.$emit('onlyGoBack')
            }
          })
        } else { // 教师保存
          let param = {
            objectConfigId: this.data.objectConfigId,
            teacherCode: this.data.teacherCode,
            courseCode: this.data.courseCode,
            managementId: this.data.managementId,
            submitStatus: 0,
            evaluateType: this.data.evaluateType,
            contentSaveDTOList: this.resultList
          }
          questionnaireApi.saveQuestionnaireTeacher(param).then(res => {
            if (res.code == 200) {
              this.$message.success('保存成功')
              this.$emit('onlyGoBack')
            }
          })
        }
      })

    },
    // 提交
    submit() {
      let canSubmit = true
      if (this.ifProcess) {
        this.resultList.some(item => {
          if ((item.titleType === 1 || item.titleType === 2) && !item.options) {
            this.$message.error('存在未做的选择题，请选择')
            canSubmit = false
            return true
          }
        })
      } else {
        this.resultList.some(item => {
          if (item.titleType === 1 && !item.options) {
            this.$message.error('存在未做的单选题，请选择')
            canSubmit = false
            return true
          }
        })
      }
      if (canSubmit) {
        this.$confirm(this.$t('确定要提交吗'), this.$t("message.prompt"), {
          confirmButtonText: this.$t("message.confirm"),
          cancelButtonText: this.$t("message.cancel"),
          type: "warning"
        }).then(() => {
          if (this.ifStudentComeIn) {
            let param = {
              objectConfigId: this.data.objectConfigId,
              studentId: this.data.studentId,
              courseCode: this.data.courseCode,
              managementId: this.data.managementId,
              submitStatus: 1,
              evaluateType: this.data.evaluateType,
              contentSaveDTOList: this.resultList
            }
            questionnaireApi.saveQuestionnaireStu(param).then(res => {
              if (res.code == 200) {
                this.$message.success('提交成功')
                this.$emit('onlyGoBack')
              }
            })
          } else {
            let param = {
              objectConfigId: this.data.objectConfigId,
              teacherCode: this.data.teacherCode,
              courseCode: this.data.courseCode,
              managementId: this.data.managementId,
              submitStatus: 1,
              evaluateType: this.data.evaluateType,
              contentSaveDTOList: this.resultList
            }
            questionnaireApi.saveQuestionnaireTeacher(param).then(res => {
              if (res.code == 200) {
                this.$message.success('提交成功')
                this.$emit('onlyGoBack')
              }
            })
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.title-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .page-title {
    font-size: 18px;
    font-weight: bold;
  }
}
.title {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
}
.question-item-container {
  margin-bottom: 20px;
  .question-item-title-container {
    margin-bottom: 10px;
    .question-title {
      display: flex;
      align-items: middle;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .question-row {
    display: flex;
    // justify-content: space-between;
    padding: 0 30px;
    .option-item {
      width: 20%;
    }
  }
}
.no-data {
  text-align: center;
}
</style>
